<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- <mescroll-uni ref="mescrollRef" height="686" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
		 :up="upOption"> -->
			<view class="list">
				<view class="list-item" v-for="(item, index) in mockDataList">
					<view class="avatar">
						<image :src="item.img"></image>
					</view>
					<view class="theme">
						<text>{{item.title}}</text>
						<text>{{item.desc}}</text>
					</view>
					<view class="num">{{item.count}}</view>
				</view>
			</view>
		<!-- </mescroll-uni> -->
	</view>
</template>
<script>
	import Api from '@/common/api';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";


	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				imgsrc: Api.imgsrc,
				imgIcon: Api.imgIcon,
				listHeight: 474,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 3, // 每页数据的数量,默认3
					},
					noMoreSize: 3, //配置列表的总数量要大于等于 noMoreSize 条菜显示 textNoMore 的提示
					textNoMore: '-- 我是有底线的 --',
					empty: {
						tip: '当前暂无任何数据',
						icon: '/static/empty/empty-data.png'
					}
				},
				dataList:[],
				mockDataList: [{
					img:'http://dwz.date/aJ6b',
					title:'小福分抽大奖',
					desc: '活动送积分',
					count: '+5'
				},{
					img:'http://dwz.date/aJ6b',
					title:'小福分抽大奖',
					desc: '活动送积分',
					count: '-5'
				},{
					img:'http://dwz.date/aJ6b',
					title:'小福分抽大奖',
					desc: '活动送积分',
					count: '+5'
				},{
					img:'http://dwz.date/aJ6b',
					title:'小福分抽大奖',
					desc: '活动送积分',
					count: '+5'
				}],
			}
		},
		computed: {

		},
		methods: {
			/**
			 * @param {Object} page
			 * @description 下来刷新回调
			 */
			upCallback(page) {
				let pageNum = page.num; //页码。默认从1开始
				this.loadData(pageNum);
			},
			
			async loadData(pageNum) {
				let params = {
					"page": pageNum,
					"type": this.type,
					"level": this.i + 1
				}, method = 'POST', data = await Api.apiCall(method, Api.agent.get_agent_user, params)
				if (data) {
					console.log(`pageNum: ${pageNum}`)
					if (pageNum == 1) {
						this.preEveryTimeRequestNum = 0;
						this.dataList = []; //如果是第一页需手动置空列表
					}

					let hasNext = this.preEveryTimeRequestNum <= data.users.length,
						curListLen = data.users.length;
					this.preEveryTimeRequestNum = data.users.length;


					if (data.users.length > 0) {
						this.dataList = this.dataList.concat(data.users);
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen, hasNext);
						});
					} else {
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen)
						});
					}
				} else {
					//  请求失败,隐藏加载状态
					console.log(`error`)
					this.mescroll.endErr()
				}

			}
		}
	}
</script>

<style lang="scss">
	.list{
		padding-bottom: 30upx;
		.list-item{
			display: flex;
			height: 158upx;
			justify-content: space-between;
			align-items: center;
			padding: 0 28upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #232323;
			width: 100%;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				width: 95%;
				bottom: 0;
				margin: auto;
				left: 0;
				right: 0;
				height: 1upx;
				background-color: rgba(243,245,247,1);
			}
			&:last-child::before{
				content: unset;
			}
			.avatar{
				width: 128upx;
				height: 128upx;
				border-radius: 5upx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.theme{
				flex: 1;
				margin-left: 29upx;
				display: flex;
				flex-flow: column wrap;
				justify-content: center;
				font-size: 24upx;
				color: #ABADAD;
				text{
					&:first-child{
						font-size: 28upx;
						color: #313332;
						margin-bottom: 20upx;
					}
				}
			}
			.num{
				font-size: 36upx;
				color: #313333;
				font-weight: bold;
			}
		}
	}
</style>
